<template>
	<view class="page-box">
		<u-cell-group>
			<u-cell-item title="头像">
				<image :src="info.avatar" slot="right-icon" class="zs-img radius-50" @click="upload" />
			</u-cell-item>
			<u-cell-item title="昵称">
				<u-input v-model="info.nickname" slot="right-icon" />
			</u-cell-item>
		</u-cell-group>
		<view class="fixed">
			<u-button type="primary" :custom-style="customStyle" @click="submit" :disabled="isDisabled">保存</u-button>
		</view>
	</view>
</template>

<script>
	import {
		customStyle
	} from "@/utils/common.js"
	export default {
		data() {
			return {
				customStyle,
				info: {},
				isDisabled: false,
				fileList: [],
			};
		},
		onLoad() {
			this.initUserData()
		},
		methods: {
			initUserData() {
				this.$u.api._myIndex().then(res => {
					this.info = res.data;
				})
			},
			submit() {
				let parm = {
					avatar: this.info.avatar,
					nickname: this.info.nickname,
				}
				this.$u.api._profile(parm).then(res => {
					this.isDisabled = true;
					this.$u.toast('修改成功');
					if (uni.getStorageSync('userinfo')) {
						let userinfo = uni.getStorageSync('userinfo');
						userinfo.avatar = this.info.avatar;
						uni.setStorageSync('userinfo', userinfo);
					}
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1500)
				})
			},
			upload() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.showLoading({
							title: '图片上传中'
						});
						let tempFilePaths = res.tempFilePaths
						uni.uploadFile({
							url: 'https://flzx.nanjingyunpeng.cn/api/common/upload', //接口地址
							header: {
								token: uni.getStorageSync('token')
							},
							filePath: tempFilePaths[0],
							name: 'file',
							success: (resd) => {
								this.$u.toast('上传成功')
								uni.hideLoading();
								let data = JSON.parse(resd.data);
								this.info.avatar = data.data.fullurl;
							}
						});
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.u-cell {
		padding: 35rpx 30rpx;

		.zs-img {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.btn-bottom {
		margin-top: 100rpx;
	}

	/deep/ .u-input__input {
		text-align: right;
	}
</style>